<template>
  <el-aside :width="isCollapse ? '64px' : '200px'">
    <div class="logo">
      <img src="~@/assets/logo.png" alt="" />
      <span>校园兼职</span>
    </div>
    <el-menu
      background-color="#333333"
      text-color="#ffffff"
      active-text-color="#03a0d4"
      style="border: 0px"
      :default-active="active"
      :collapse="isCollapse"
      router
    >
      <el-menu-item
        :index="item.href"
        v-for="(item, index) in menus"
        :key="index"
        @click="handleMenuItem(item)"
      >
        <i :class="item.icon" style="margin-right: 1vw"></i>
        <span slot="title">{{ item.name }} </span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>
<script>
export default {
  name: 'SideBar',
  props: ['isCollapse'],
  data () {
    return {
      menus: [
        // { name: 'test', href: '/test' },
        // { name: '公司信息', href: '/company' },
        // { name: '岗位信息', href: '/companyPost' },
        // { name: '学生信息', href: '/studentInfo' },
        // { name: '请求岗位', href: '/sendInfo' }
      ],
      active: '' // 默认选中
    }
  },
  methods: {
    handleMenuItem (item) {
      this.$emit('handleMenuItem', item)
    },
    getMenu () {
      this.$get('/menu/getMenus').then(res => {
        console.log('获取菜单:', res.data)
        this.menus = res.data.map(menu => ({
          name: menu.name,
          href: menu.href,
          icon: menu.icon
        })

        )
      })
    }
  },
  created () {
    this.getMenu()
    // this.$store
    //   .dispatch('getMenus')
    //   .then((res) => {
    //     if (res) {
    //       this.menus = res.obj
    //       console.log(this.menus, '导航栏的菜单')
    //       let selectMenu // 选中的菜单
    //       if (this.$route.path) {
    //         this.active = this.$route.name
    //         selectMenu = this.menus.filter((v) => v.href === this.active)[0]
    //       } else {
    //         this.active = this.menus[0].href
    //         selectMenu = this.menus[0]
    //       }
    //       this.handleMenuItem(selectMenu)
    //     }
    //   })
    //   .catch(() => {})
  }
}
</script>
<style scoped>
.el-aside {
  background-color: #333333;
  color: aliceblue;
  min-height: 100vh;
  /* 动画 */
  transition: all 0.5s;
}
.logo {
  height: 60px;
  width: 200px;
  line-height: 60px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  padding-left: 60px;
}
.logo img {
  position: absolute;
  width: 40px;
  height: 40px;
  left: 10px;
  top: 10px;
}
.logo > span {
  padding-left: 4px;
}
.el-aside::-webkit-scrollbar {
  display: none;
}
</style>
